<template>
  <div class="idea item">
    <div class="item-h">
      <span class="line"></span>
      <b class="ftz16">牛人榜</b>
      <router-link to="/superior" class="fr">全部</router-link>
    </div>
    <div class="con">
      <NoDataTips v-if="list.length === 0"/>
      <ul v-else>
        <li v-for="(item, index) in list" :key="item.userId">
          <router-link :to="'/dashboard/qa/' + item.userId">
            <div class="photo">
              <a href="javasctipt:void(0)" class="images">
                <img class="famous-img" :src="item.imageUrl">
              </a>
              <button :class="{'black': item.followed=='1'}"
                @click.stop.prevent="follow(index, item)">
                {{item.followed=='1'?'已关注': '+关注'}}
              </button>
              <img src="../../assets/res/img/icon_appr.png" class="appr">
            </div>
            <div class="info fr">
              <a href="javasctipt:void(0)" class="name ftz16">{{item.accoutName}}</a>
              <p>{{item.accoutDesc}}</p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  modifyUserFocus
} from '@/service/api'
export default {
  props: ['list'],
  data () {
    return {

    }
  },
  computed: {
    userId () {
      return this.$store.state.me.sysUser.userId
    }
  },
  methods: {
    async follow (itemIndex, item) {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再关注！')
        return false
      }
      let flag = item.followed
      await modifyUserFocus({
        focusUserId: item.userId,
        focusStatus: flag
      })
      item.followed = flag ? 0 : 1
      this.$set(this.list, itemIndex, item)
    }
  }
}
</script>
